
<template>
  <div class="aboutme container">
        <div class="text-center">
                <h1>About Me</h1>
             </div>
    <div class="row">
       
        <div class="col-md-4">
            <ul class="info wow bounceInUp"  data-wow-duration="2s" data-wow-delay="0.7s">
                <li><span class="messageTitle">姓 名：</span><span class="messageContenct">钟伟杰</span></li>
                <li><span class="messageTitle">手 机：</span><span class="messageContenct">17727226108</span></li>
                <li><span class="messageTitle">邮 箱：</span><span class="messageContenct">zhongjack@qq.com</span></li>
                <li><span class="messageTitle">地 址：</span><span class="messageContenct">惠城区横沥镇大岚村</span></li>
                <li><span class="messageTitle">学 历：</span><span class="messageContenct">全日制大学专科</span></li>
            </ul>
        </div>
        <div class="col-md-8 personalProfile wow bounceInUp"  data-wow-duration="2s" data-wow-delay="1s">
            <h3>个人简介</h3>
            <p>&nbsp;&nbsp;&nbsp;你好，我叫钟伟杰，22岁，惠州人。我是计算机专业的一名应届毕业生，专业学的不是前端，但是本人对于前端非常的感兴趣，所以自学了前端，从2017年的11月份开始学习，目前的目标是找到一份前端，目前掌握了HTML与CSS、javascript、jQuery、ajax、bootstrap框架、es6等基本前端开发技术，会在项目中使用和应用Vue.js框架，会搭建vue脚手架，熟悉路由，会通过vue的http方法获取后端数据 实现前后端交互。会使用PS进行简单的切图，正在学习微信小程序开发、Vux。本人可以完成移动端页面，pc端页面，webapp等项目制作。</p>
            <p>&nbsp;&nbsp;&nbsp;本人不急躁，喜欢前端，学习能力和执行力都很不错，但是较为内向。</p>
            <ul id="icon_div">
                    <li><a href="https://gitee.com/Broken-life" target="view_window"><img src="../assets/img/码云.png" class="icon"></a></li>
                    <li><a href="https://www.cnblogs.com/ZwjFronTend/"><img src="../assets/img/博客园.png" class="icon"></a></li>
                    <li><a href="mailto:zhongjack@qq.com"><img src="../assets/img/邮箱 .png" class="icon"></a></li>
                    <li><a href="https://www.zhihu.com/people/po-sui-d-ren-sheng/activities" target="view_window"><img src="../assets/img/知乎.png" class="icon"></a></li>
            </ul>
        </div>
    </div>   
  </div>
</template>

<script>


export default {
  name: 'aboutme',
  data () {
    return {
     
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

#icon_div{
   
    padding: 0;
    display: block;

}
#icon_div li{
    display: inline;
    

}
.icon{
    width: 30px;
    height: 30px;
    padding: 5px;
    border: 0.5px solid #c8c8c8

   
}
.icon:hover{
    box-shadow:2px 3px 7px #c8c8c8;
    background-color: #63B8FF;
}
    .personalProfile{
        margin: 10px 0;
        font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu;
        font-size: 1.7rem;
    }
    .personalProfile h3{
        font-weight:600;
    }
    .personalProfile p{
        line-height: 3rem;
        font-weight:300;
        color: #555;
    }
    .info{
        margin-top: 30px;
    }
    .info li{
       list-style: none;
       width: 100%;
        margin: 10px 0;
        font-size: 1.7rem;
        padding: 10px 0;        
    }
    .info li:hover{
        box-shadow: 0.5px 0.5px 0.5px #c8c8c8 ;
    }
    .messageTitle{
        font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu;
        font-weight: bold;
        width: 30%;
        float: left;
        padding-left: 20px
    }
    .messageContenct{
        color: #555;
        width: 70%;
        display: inline-block;
    }
    *{
      font-family: "Space Mono", Arial, serif;  
    }
    h1{
        font-size: 4rem;
    }
    @media only screen and (max-width: 480px){
    .messageTitle{
        padding-left:0;
    }
    .info{
        margin-top: 10px;
        padding: 0 30px;
        
    }
    .info li{
        margin: 3px 
    }
    .info li:hover{
        box-shadow: none;
    }
    .personalProfile{
        margin-top:30px; 
    }
}  
</style>
<style>
    .aboutme{
        margin-top:60px;
        margin-bottom:4rem;
    }
    @media only screen and (max-width: 480px){
        .aboutme{
        margin-top:10px;   
    }
    }
</style>
